<template>
	<view>
		<view class="flex align-center justify-between  bg padding">
			<view v-for="(item,index) in list" :key="index" :class="tabIndex==index?'active':'act'"
				@click="change(index)">
				{{item.name}}
				<view class="ban" v-if="tabIndex==index"></view>
			</view>
		</view>
		<view class="empty" v-if="moneylist.length==0">
			<view
				style="display: block; width: 90%; margin: 0 auto; position: fixed;top: 35%;left: 0rpx;right: 0rpx;text-align: center;">
				<image src="../../static/image/emety.png" style="width: 300rpx;height: 300rpx;"></image>
				<view style="color: #CCCCCC;">暂无内容</view>
			</view>
		</view>
		<view class="popup_money" v-else>
			<view class="data_select">
				<view class="money_box" v-for="(item,index) in moneylist" :key="index">
					<view class="box_tit">
						<view class="flex align-center">
							<!-- 优惠券类型 0全部可用 1即时代驾 2朋友代叫 3预约代驾 -->
							<view class="money_name">{{item.couponName}} -</view>
							<view class="text-sm margin-left-xs" v-if="item.couponType==0">通用</view>
							<view class="text-sm margin-left-xs" v-if="item.couponType==1">即时代驾</view>
							<view class="text-sm margin-left-xs" v-if="item.couponType==2">朋友代叫</view>
							<view class="text-sm margin-left-xs" v-if="item.couponType==3">预约代驾</view>
						</view>
						<view class="money_price"><text>￥</text>{{item.money}}</view>
					</view>
					<view class="money_data" v-if="item.expirationTime">有效期至{{item.expirationTime}}</view>
					<view class="money_data" v-else>永久有效</view>
					<view class="money_line">
						<u-line direction="row" color="#E6E6E6" border-style="dashed" />
					</view>
					<view class="box_bottom">
						<view class="money_use">满{{item.minMoney}}元可使用</view>
						<view class="money_btn">
							<view class="lj_use" @click="goIndex" v-if="item.status==0">
								立即使用
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 1,
					name: '可使用'
				}, {
					id: 2,
					name: '已使用'
				}, {
					id: 3,
					name: '已失效'
				}],
				tabIndex: '0',
				page: 1,
				limit: 10,
				moneylist: []
			}
		},
		onLoad() {
			this.hongbao()
		},
		methods: {
			goIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			change(index) {
				this.tabIndex = index
				this.page = 1
				this.hongbao()
			},
			//获取登录用户的所有红包
			hongbao() {
				let data = {
					page: this.page,
					limit: this.limit,
					status: this.tabIndex
				}
				this.$Request.getT('/app/couponUser/getMyCouponList', data).then(res => {
					console.log(res)
					if (res.code === 0) {
						if (this.page == 1) {
							this.moneylist = res.data.records
						}
						if (this.page > 1) {
							if (res.data.records.length > 0) {
								this.moneylist = this.moneylist.concat(res.data.records)

							}
						}
						// console.log(this.hongbao)
						this.totalPage = res.data
					}
				});

			}
		},
		onReachBottom: function() {
			if (this.page < this.totalPage) {
				this.page = this.page + 1;
				this.hongbao();
			}

		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.hongbao();
		},
	}
</script>

<style lang="less">
	page {
		background-color: #F5F5F5;
	}

	.bg {
		background: #FFFFFF;
	}

	.act {
		color: #999999;
		font-size: 30upx;
	}

	.active {
		/* color: #025EFD; */
		font-size: 38upx;
		font-weight: bold;
		position: relative;

	}

	.ban {
		width: 100%;
		height: 16rpx;
		background: #2397FB;
		opacity: 0.7;
		position: absolute;
		top: 35rpx;
	}

	.empty {
		width: 100%;
		background: #ffffff;
		/* #ifdef MP-WEIXIN */
		height: 93vh;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		height: 100vh;
		/* #endif */
	}

	.popup_money {
		height: 800upx;
		width: 100%;
		position: relative;
	}

	.u-drawer-bottom {
		background-color: #FAF7F5 !important;
	}

	.money_box {
		width: 93%;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 14upx;
		height: 220rpx;
		margin-bottom: 20upx;
		margin-top: 20rpx;
	}

	.box_tit {
		width: 90%;
		margin: 0 auto;
		height: 80upx;
		display: flex;
	}

	.money_name {
		flex: 1;
		display: flex;
		justify-content: left;
		align-items: center;
		font-size: 27rpx;
		font-weight: bold;
		letter-spacing: 2upx;
	}

	.money_price {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 48upx;
		font-weight: bold;
		color: red;

		text {
			font-size: 30rpx;
		}
	}

	.money_data {
		color: #999999;
		font-size: 24rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: -8upx;
	}

	.u-line {
		width: 90% !important;
		border-bottom-width: 6upx !important;
		margin: 0 auto !important;
		margin-top: 22upx !important;
		margin-bottom: 22upx !important;
	}

	.box_bottom {
		width: 90%;
		margin: 0 auto;
		display: flex;
		height: 40upx;
	}

	.money_use {
		flex: 1;
		color: #999999;
		font-size: 24rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.lj_use {
		width: 150rpx;
		border: 2rpx solid #FF130A;
		color: #FF130A;
		text-align: center;
		line-height: 48rpx;
		border-radius: 40rpx;
		font-size: 23rpx;
	}
</style>